<template>
  <QTable :url='state.url' :column='state.column' :params='{fileName: "xxx"+moment().format("YYYY")}'>
    <template #filter>
      <Filter v-model="form" init :filter-array='filterArray'>
        <template #cus="{scope}">
          <el-input v-model="form.cus"/>
        </template>
      </Filter>
    </template>
    <template #cus_name>
      <img src='@/assets/layout/logo.png' width='50' >
    </template>
    <template #cus_control>
      <el-button type="primary">主要</el-button>
      <el-button type="success">成功</el-button>
      <el-button type="warning">警告</el-button>
    </template>
  </QTable>
</template>

<script setup>
import QTable from '../../components/QTable/index.vue'
import Filter from '../../components/QTable/filter.vue'
import moment from 'moment-mini'
// 筛选表单的默认值
let form = reactive({
  cus: '222222',
  date: moment().format('YYYY-MM-DD'),
  'startDate,endDate': [moment().format('YYYY-MM-DD HH:mm:ss'),moment().add(1,'days').format('YYYY-MM-DD HH:mm:ss')],
})
// 表格请求的接口及列
const state = {
  url: '/api/getTableData',
  column: [{
    prop: 'date',
    label: '日期',
    width: 200
  },{
    prop: 'name',
    label: '姓名'
  },{
    prop: 'address',
    label: '地址'
  },{
    prop: 'control',
    label: '操作',
    width: 280,
    fixed: 'right'
  }]
}

// 筛选表单配置
let filterArray = [{
  itemType: 'slot',
  prop: 'cus',
  show: true,
  label: '自定义'
},{
  itemType: 'input',
  prop: 'user',
  show: true,
  label: '姓名',
  width: '200px',
  attrs: {
    placeholder: '输入姓名',
  }
},{
  itemType: 'select',
  prop: 'region',
  show: true,
  label: '身份',
  options: [{
    label: 'one',
    value: 1
  },{
    label: 'two',
    value: 2
  }],
  attrs: {
    placeholder: '选择身份',
  }
},{
  itemType: 'date',
  prop: 'date',
  show: true,
  label: '日期',
  attrs: {
    placeholder: '日期选择',
    type: 'date'
  }
},{
  itemType: 'date',
  prop: 'startDate,endDate',
  show: true,
  label: '日期范围',
  attrs: {
    type: 'datetimerange',
    rangeSeparator: "-",
    startPlaceholder:"起始日期",
    endPlaceholder:"终止日期",
  }
}]

</script>

<style scoped>

</style>
